import { FC, useState, ChangeEvent } from 'react';
import { Button, Input } from 'antd';
import { useDispatch } from 'umi';

const Form: FC = () => {
  const [textValue, set_textValue] = useState<string>('');
  const dispatch = useDispatch();

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    set_textValue(e.target.value);
  };

  const handleClick = () => {
    dispatch({
      type: 'index/add',
      payload: textValue,
    });
  };

  return (
    <div className="form">
      <Input
        placeholder="Basic usage"
        value={textValue}
        onChange={handleChange}
      />
      <Button type="primary" onClick={handleClick}>
        添加
      </Button>
    </div>
  );
};

export default Form;
